<template>
  <view class="change-password-container">
    <view class="header">
      <view class="title">修改密码</view>
    </view>
    
    <view class="form-container">
      <view class="form-item">
        <text class="form-label">当前密码</text>
        <input 
          v-model="form.oldPassword" 
          class="form-input" 
          type="password" 
          placeholder="请输入当前密码"
          :class="{'error': errors.oldPassword}"
          @input="clearError('oldPassword')"
          password
        />
      </view>
      <text v-if="errors.oldPassword" class="error-text">{{ errors.oldPassword }}</text>

      <view class="form-item">
        <text class="form-label">新密码</text>
        <input 
          v-model="form.newPassword" 
          class="form-input" 
          type="password" 
          placeholder="请输入新密码"
          :class="{'error': errors.newPassword}"
          @input="clearError('newPassword')"
          password
        />
      </view>
      <text v-if="errors.newPassword" class="error-text">{{ errors.newPassword }}</text>

      <view class="form-item">
        <text class="form-label">确认新密码</text>
        <input 
          v-model="form.confirmPassword" 
          class="form-input" 
          type="password" 
          placeholder="请再次输入新密码"
          :class="{'error': errors.confirmPassword}"
          @input="clearError('confirmPassword')"
          password
        />
      </view>
      <text v-if="errors.confirmPassword" class="error-text">{{ errors.confirmPassword }}</text>

    </view>
    
    <button 
      class="save-btn" 
      :disabled="loading"
      @tap="handleChangePassword"
    >
      <text v-if="!loading">确认修改</text>
      <view v-else class="loading-container">
        <view class="loading-spinner"></view>
        <text>修改中...</text>
      </view>
    </button>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { changePassword } from '@/api'

const form = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const errors = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const loading = ref(false)

// 表单验证
const validateForm = () => {
  let isValid = true
  errors.oldPassword = ''
  errors.newPassword = ''
  errors.confirmPassword = ''

  if (!form.oldPassword.trim()) {
    errors.oldPassword = '请输入当前密码'
    isValid = false
  }

  if (!form.newPassword.trim()) {
    errors.newPassword = '请输入新密码'
    isValid = false
  } else if (form.newPassword.length < 6) {
    errors.newPassword = '新密码长度不能少于6位'
    isValid = false
  }

  if (!form.confirmPassword.trim()) {
    errors.confirmPassword = '请确认新密码'
    isValid = false
  } else if (form.newPassword !== form.confirmPassword) {
    errors.confirmPassword = '两次输入的密码不一致'
    isValid = false
  }

  if (form.oldPassword === form.newPassword) {
    errors.newPassword = '新密码不能与当前密码相同'
    isValid = false
  }

  return isValid
}

// 清除错误
const clearError = (field) => {
  errors[field] = ''
}

// 修改密码
const handleChangePassword = async () => {
  if (!validateForm()) return

  loading.value = true

  try {
    await changePassword({
      oldPassword: form.oldPassword,
      newPassword: form.newPassword
    })

    uni.showToast({
      title: '密码修改成功',
      icon: 'success',
      duration: 1500
    })

    // 延迟返回上一页
    setTimeout(() => {
      uni.navigateBack()
    }, 1000)

  } catch (error) {
    console.error('修改密码失败:', error)
    // 错误信息已由API自动处理
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.change-password-container {
  min-height: 100vh;
  background: #f8f8f8;
}

.header {
  text-align: center;
  padding: 40rpx 0;
  background: #fff;
  
  .title {
    font-size: 36rpx;
    font-weight: 600;
    color: #2c2c2c;
  }
}

.form-container {
  width: 690rpx;
  margin: 50rpx auto;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10rpx;
  box-shadow: 0 0 30rpx rgba(0,0,0,0.05);
}

.form-item {
  padding: 0 30rpx;
  min-height: 100rpx;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  
  &:last-child {
    border-bottom: 0;
  }
}

.form-label {
  width: 140rpx;
  font-size: 28rpx;
  color: #2c2c2c;
  flex-shrink: 0;
}

.form-input {
  flex: 1;
  height: 60rpx;
  padding: 0 20rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  font-size: 28rpx;
  background: #fff;
  margin-left: 20rpx;
  
  &.error {
    border-color: #ff4757;
  }
  
  &:focus {
    border-color: #667eea;
  }
}

.error-text {
  color: #ff4757;
  font-size: 22rpx;
  margin-top: 10rpx;
  margin-left: 160rpx;
  display: block;
}

.save-btn {
  width: 690rpx;
  height: 80rpx;
  background: #667eea;
  border: none;
  border-radius: 8rpx;
  color: #fff;
  font-size: 28rpx;
  margin: 50rpx auto;
  line-height: 80rpx;
  
  &:active {
    background: #5a6fd8;
  }
  
  &:disabled {
    opacity: 0.6;
  }
}

.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  width: 30rpx;
  height: 30rpx;
  border: 3rpx solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s linear infinite;
  margin-right: 16rpx;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style> 